<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-headset"></i> 用户列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                姓名：
                <el-input
                    v-model="name"
                    placeholder="请搜索用户姓名"
                    class="handle-input mr10"
                    @keyup.enter.native="handleSearch"
                ></el-input>
                手机号：
                <el-input
                    v-model="phone"
                    placeholder="请搜索用户手机号"
                    class="handle-input mr10"
                    @keyup.enter.native="handleSearch"
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="用户ID" width="55" align="center"></el-table-column>
                <el-table-column prop="f_nickName" label="姓名"></el-table-column>
                <el-table-column prop="f_phone" label="手机号码"></el-table-column>
                <el-table-column prop="rechargeMoneys" label="累计充值金额"></el-table-column>
                <el-table-column prop="payMoneys" label="已消费总金额"></el-table-column>
                <el-table-column prop="coupon" label="总优惠券数量"></el-table-column>
                <el-table-column label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.f_headimgurl"
                            :preview-src-list="[scope.row.f_headimgurl]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="long" label="开台总时长"></el-table-column>
                <el-table-column label="用户身份" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.f_is_c == 2" type="success">商家</el-tag>
                        <el-tag v-if="scope.row.f_is_c == 1" type="success">用户</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-search" @click="handleEdit(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.pageNum"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 查看弹窗 -->
        <el-dialog title="查看弹窗" :visible.sync="editVisible" width="1000px" append-to-body>
            <el-form ref="form" :model="form" label-width="100px">
                <div style="display: flex">
                    <el-form-item label="商家姓名:">
                        <div>{{ form.f_nickName }}</div>
                    </el-form-item>
                    <el-form-item label="ID:" style="margin-left: 100px">
                        <div>{{ form.id }}</div>
                    </el-form-item>
                    <el-form-item label="用户身份:" style="margin-left: 120px">
                        <div>{{ form.f_is_c == 1 ? '用户' : '商家' }}</div>
                    </el-form-item>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center">
                    <div style="width: 300px; height: 200px; border: 1px solid #eeeeee; padding-left: 20px; border-radius: 10px">
                        <div style="width: 100px; height: 30px; margin: auto; padding-bottom: 10px; margin-top: 20px">消费信息</div>
                        <div>最近消费商家：{{ form.f_recently_shop ? form.f_recently_shop.f_shop_name : '' }}</div>
                        <div>最近消费时间：{{ form.f_recently_date }}</div>
                        <div>最近消费金额：{{ form.f_recently_money }}</div>
                        <div style="font-weight: bold; padding-bottom: 10px; margin-top: 20px">累计消费</div>
                        <div>累计消费金额：{{ form.consumeMoney }}</div>
                    </div>
                    <div style="width: 600px; height: 200px; border: 1px solid #eeeeee; padding-left: 20px; border-radius: 10px">
                        <div style="width: 100px; height: 30px; margin: auto; margin-top: 20px">账户资产</div>
                        <div style="display: flex">
                            <div>
                                <div style="font-weight: bold; padding-bottom: 10px">优惠券</div>
                                <div>优惠券数量：{{ form.userCoupons }}</div>
                                <div>已使用平台优惠券：{{ form.userUsedTerraceCoupons }}</div>
                                <div>已使用商家优惠券：{{ form.userUsedShopCoupons }}</div>
                                <div>未使用平台优惠券：{{ form.userNUseTerraceCoupons }}</div>
                                <div>未使用商家优惠券：{{ form.userNUseShopCoupons }}</div>
                            </div>
                            <div style="margin-left: 30px">
                                <div style="font-weight: bold; padding-bottom: 10px">余额</div>
                                <div>总充值余额金额：{{ form.rechargeMoney }}</div>
                                <div>总消费余额金额：{{ form.consumeMoney }}</div>
                            </div>
                            <div style="margin-left: 30px">
                                <div style="font-weight: bold; padding-bottom: 10px">其他</div>
                                <div>总开台时长：{{ form.useLong }}</div>
                            </div>
                        </div>
                    </div>
                </div>
               
            </el-form>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="交易明细" name="0">
                    <el-table :data="dealList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                        <el-table-column prop="f_wx_no" label="订单编号"></el-table-column>
                        <el-table-column prop="has_shop.f_shop_name" label="商家店铺"></el-table-column>
                        <el-table-column prop="f_start_time" label="开台时间"></el-table-column>
                        <el-table-column prop="f_eq_no" label="桌台号码"></el-table-column>
                        <el-table-column prop="f_cash_pledge" label="押金金额"></el-table-column>
                        <el-table-column prop="f_end_time" label="关台时间"></el-table-column>
                        <el-table-column prop="f_coupon_money" label="优惠减免"></el-table-column>
                        <el-table-column prop="f_pay_money" label="实付款"></el-table-column>
                        <el-table-column label="支付方式" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.f_pay_type == 1">微信支付</el-tag>
                                <el-tag v-if="scope.row.f_pay_type == 2">押金支付</el-tag>
                            </template>
                        </el-table-column>
                    </el-table></el-tab-pane
                >
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="queryDetail.page"
                        :page-size="queryDetail.pageNum"
                        :total="pageTotalDetail"
                        @current-change="handlePageChangeDetail"
                    ></el-pagination>
                </div>
                <el-tab-pane label="优惠券明细" name="1">
                    <el-table :data="couponList" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                        <el-table-column prop="has_coupon.f_name" label="优惠券名称"></el-table-column>
                        <el-table-column label="所属优惠券" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.has_coupon.f_shop_id == 0" type="success">平台优惠券</el-tag>
                                <el-tag v-if="scope.row.has_coupon.f_shop_id == 1">商家优惠券</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="has_coupon.f_free_money" label="优惠券面额"></el-table-column>
                        <el-table-column prop="has_coupon.f_start_date" label="有效时间"></el-table-column>
                        <el-table-column prop="has_coupon.f_start_date" label="结束时间"></el-table-column>
                        <el-table-column label="状态" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.f_status == 1">未使用</el-tag>
                                <el-tag v-if="scope.row.f_status == 2">已使用</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { getAdminUserTranDetails, getAdminUserCouponDetails, getAdminUserData, getWxUserList, opWithDrawal } from '../../../api/index';
export default {
    name: 'userList',
    data() {
        return {
            activeName: 0,
            query: {
                page: 1,
                pageNum: 15
            },
            queryDetail: {
                page: 1,
                pageNum: 15
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            pageTotalDetail: 0,
            form: {},
            userId: '',
            dealList: [],
            couponList: [],
            type: 0,
            name: '',
            phone: ''
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            getWxUserList(this.query).then((res) => {
                console.log(res.data.list);
                this.tableData = res.data.list;
                this.pageTotal = res.data.count || 50;
            });
        },
        // 触发搜索按钮
        handleSearch() {
            getWxUserList({
                page: 1,
                pageNum: 15,
                name: this.name,
                phone: this.phone
            }).then((res) => {
                console.log(res.data.list);
                this.tableData = res.data.list;
                this.pageTotal = res.data.count || 50;
            });
        },
        //tab切换请求
        handleClick(tab, event) {
            // this.activeName = tab.index
            if (this.activeName == 0) {
                //消费明细
                getAdminUserTranDetails({
                    userId: this.userId,
                    page: this.queryDetail.page,
                    pageNum: this.queryDetail.pageNum
                }).then((res) => {
                    this.dealList = res.data.list;
                });
            } else if (this.activeName == 1) {
                //优惠券明细
                getAdminUserCouponDetails({
                    userId: this.userId
                }).then((res) => {
                    this.couponList = res.data.list;
                });
            }
        },
        // 查看用户详情
        handleEdit(index, row) {
            console.log(index, 'ididdi');
            this.userId = index.id;
            getAdminUserData({
                userId: index.id
            }).then((res) => {
                this.form = res.data;
            });
            //明细数据同步
            getAdminUserTranDetails({
                userId: this.userId,
                page: this.queryDetail.page,
                pageNum: this.queryDetail.pageNum
            }).then((res) => {
                this.dealList = res.data.list;
                this.pageTotalDetail = res.data.count;
                console.log(this.dealList, 'this.dealList');
            });
            this.editVisible = true;
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        handlePageChangeDetail(val) {
            console.log(val);
            this.$set(this.queryDetail, 'page', val);
            this.handleClick();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.green {
    color: rgb(38, 141, 38);
}
.red {
    color: red;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
